<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8"
	contentType="text/html;charset=utf-8"%>
<script type="text/javascript">
var setting = {
		view: {
			dblClickExpand: false
		},
		check: {
			enable: true
		},
		callback: {
			onRightClick: OnRightClick
		}
	};

	var zNodes =[
		{id:1, name:"此类节点不响应右键菜单", open:true, noR:true,
			childs:[
				   {id:11, name:"节点1", noR:true},
				   {id:12, name:"节点2", noR:true}

			]},
		{id:2, name:"右键操作 1", open:true,
			childs:[
				   {id:21, name:"节点11"},
				   {id:22, name:"节点12"},
				   {id:23, name:"节点13"},
				   {id:24, name:"节点14"}
			]},
		{id:3, name:"右键操作 1", open:true,
			childs:[
				   {id:31, name:"节点21"},
				   {id:32, name:"节点22"},
				   {id:33, name:"节点23"},
				   {id:34, name:"节点24"}
			]}
	 	];

	function OnRightClick(event, treeId, treeNode) {
		if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
			zTree.cancelSelectedNode();
			showRMenu("root", event.clientX, event.clientY);
		} else if (treeNode && !treeNode.noR) {
			zTree.selectNode(treeNode);
			showRMenu("node", event.clientX, event.clientY);
		}
	}

	function showRMenu(type, x, y) {
		$("#rMenu ul").show();
		if (type=="root") {
			$("#m_del").hide();
		} else {
			$("#m_del").show();
		}
		alert(type);
		rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});
		

		$("body").bind("mousedown", onBodyMouseDown);
	}
	function hideRMenu() {
		alert(11)
		if (rMenu) rMenu.css({"visibility": "hidden"});
		$("body").unbind("mousedown", onBodyMouseDown);
	}
	function onBodyMouseDown(event){
		if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
			rMenu.css({"visibility" : "hidden"});
		}
	}
	var addCount = 1;
	function addTreeNode() {
		hideRMenu();
		zTree.addNodes(zTree.getSelectedNodes()[0], [{ name:"增加" + (addCount++)}]);
	}
	function editTreeNode(){
		hideRMenu();
		var nodes = zTree.getSelectedNodes();
		if(nodes && nodes.length>0){
			var edit_node = nodes[0];
			alert(edit_node.id);
		}
		
	}
	
	
	
	
	function removeTreeNode() {
		hideRMenu();
		var nodes = zTree.getSelectedNodes();
		if (nodes && nodes.length>0) {
			if (nodes[0].childs && nodes[0].childs.length > 0) {
				var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
				if (confirm(msg)==true){
					zTree.removeNode(nodes[0]);
				}
			} else {
				zTree.removeNode(nodes[0]);
			}
		}
	}
	function checkTreeNode(checked) {
		var nodes = zTree.getSelectedNodes();
		if (nodes && nodes.length>0) {
			zTree.checkNode(nodes[0], checked, true);
		}
		hideRMenu();
	}
	function resetTree() {
		hideRMenu();
		$.fn.zTree.init($("#treeDict"), setting, zNodes);
	}

	var zTree, rMenu;
	$(document).ready(function(){
		$.fn.zTree.init($("#treeDict"), setting, zNodes);
		zTree = $.fn.zTree.getZTreeObj("treeDict");
		rMenu = $("#rMenu");
	});
</script>
<style type="text/css">
div#rMenu {
	position:absolute; 
	visibility:hidden;
	text-align: left;
	background-color:white;
	border: 1px solid #718bb7;
}
div#rMenu ul li{
	cursor: pointer;
	padding-left:2px;
	padding-top:2px;
	list-style: none outside none;
}
div#m_add,div#m_edit,div#m_del,div#m_reset{
	padding:3px 5px 3px 5px;
	cursor: pointer;
}

.header-dict{
	background: url("image/header-dict.gif") no-repeat;
	height: 39px;
}
</style>
<div class="header-dict"></div>
<div class="content_wrap">
	<div class="zTreeDemoBackground left">
		<ul id="treeDict" class="ztree"></ul>
	</div>
</div>
<div id="rMenu">
	<div id="m_add" onclick="addTreeNode();"><img src="js/jquery-1.7.1/plugin/jquery-easyui-1.2.5/themes/icons/edit_add.png"/>   新增下级字典</div>
	<div id="m_edit" onclick="editTreeNode();"><img src="js/jquery-1.7.1/plugin/jquery-easyui-1.2.5/themes/icons/pencil.png"/>   编辑字典</div>
	<div id="m_del" onclick="removeTreeNode();"><img src="js/jquery-1.7.1/plugin/jquery-easyui-1.2.5/themes/icons/edit_remove.png"/>   删除字典</div>
	<div id="m_reset" onclick="resetTree();"><img src="js/jquery-1.7.1/plugin/jquery-easyui-1.2.5/themes/icons/edit_add.png"/>   恢复zTree</div>
</div>
